<template>
    <!-- 新的朋友 -->
    <div class="new_frideds" @click="goToNewFriendsPage" :class="{active: isClick}">
        <div class="new_frideds_left">
            <el-avatar shape="square" style="width: 30px;height: 30px"
                       src="static/images/newfriend.jpg"></el-avatar>
        </div>
        <div class="new_frideds_right">
            <div class="new_friends_text">
                <span style="font-size: 14px">新的朋友</span>
            </div>
            <div v-if="isNewFriends" class="new_friends_redspot">
                <i class="iconfont iconyuandianxiao" style="font-size: 20px;color: red"></i>
            </div>
        </div>
    </div>
</template>

<script>
  export default {
    name: 'newFriends',
    data () {
      return {
        isNewFriends: true,
        isClick: false
      }
    },
    methods: {
      goToNewFriendsPage () {
        this.isClick = true
        console.log('跳转到新的好友页面')
      }
    }
  }
</script>

<style scoped>

    .active {
        background-color: #c4c4c4;
    }

    .new_frideds {
        height: 40px;
    }

    .new_frideds_left {
        float: left;
        margin: 5px;
    }

    .new_frideds_right {
        float: left;
        margin-top: 8px;
        margin-left: 5px;
    }

    .new_friends_text {
        float: left;
        width: 230px;
    }

    .new_friends_redspot {
        float: right;
        margin-top: 3px;
    }
</style>
